<template>
	<view>
		<view class="goods-list">
			<view class="mate_text">
				<!-- 头部信息 -->
				<view class="mate_header">
					<image :src= "avatar"></image>
					<view class="mate_tit">
						<view class="mate_tita">{{userName}}</view>
						<view class="mate_time">{{addTime}}</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="mate_content">{{content}}</view>
				
				<!-- 图片 -->
				<view class="mate_image" v-show="hasVideo == 1">
					<image :src="item.imgSrc" mode="" v-for="(item,index) in imgList" :key="index"></image>
				</view>
				
				<!-- 视频 -->
				<view class="mate_video" v-show="hasVideo == 0">
					<video style="width: 100%; height:160px" :src="item.imgSrc" v-for="(item,index) in imgList" :key="index"></video>
				</view>
				
				<!-- 保存 转发 点赞 评论 -->
				<view class="mate_footer">
					<view class="mate_left">
						<view class="mate_save" @click="saveImgToLocal">
							<image src="../../static/img/mater/footer_save.png" mode=""></image>
							<view>保存</view>
						</view>
						<view class="mate_transmit" @click="popup(1)">
							<image src="../../static/img/mater/footer_transmit.png" mode=""></image>
							<view>转发</view>
						</view>
					</view>
					<view class="mate_right">
						<view class="mate_comment">
							<image src="../../static/img/mater/footer_comment.png" mode=""></image>
							<view>{{total}}</view>
						</view>
						<view class="mate_tags" @click="thumbs">
							<image v-show="likeNum == false" src="../../static/img/mater/fotter_tags.png" mode=""></image>
							<image v-show="likeNum == true" src="../../static/img/mater/fotter_tags_redx.png" mode=""></image>
							<view :class=" likeNum ? 'likeColler' : ''">{{thumbsNum}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="detail-wrap">
			<view class="comment-wrap">
				<view class="scroll-wrap">
					<view class="comment-num">全部评论({{total}})</view>
					<view class="bor"></view>
					<template v-if="commentList && commentList.length > 0">
						<view class="comment-item margin-bottom-lg" v-for="(item, index) in commentList" :key="index">
							<view class="left-avatar">
								<image class="avatar" :src="item.avatar" mode="widthFix"></image>
								<view class="right-top">
									<view class="title">
										<text>{{ item.userName }}</text>
										<image v-show="item.userLevel == 1" src="../../static/img/me/footer_partner_tally.png" class="picimg"></image>
									</view>
									<view class="time">{{item.time}}</view>
								</view>
							</view>
							<view class="right-box">
								<view class="right-mine">
									<view class="content">{{ item.content }}</view>
									<view class="contenttime">{{item.addTime}}</view>
								</view>
							</view>
						</view>
					</template>
					<view class="no-data">
						<p data-v-2fbdbe34="">~没有更多内容~</p>
					</view>
				</view>
			</view>
			<view class="comment-input">
				<input type="text" v-model="commentVal" class="top-input" placeholder="请输入您想说的内容" />
				<view class="send-btn" @tap="addCommon"></view>
			</view>
		</view>
		
		<!--底部分享弹窗-->
		<tui-bottom-popup :show="popupShow" @close="popup">
			<view class="tui-share">
				<view class="tui-share-title">分享到</view>
				
				<scroll-view scroll-x class="tui-mt">
					<view class="tui-share-top">
						<view class="tui-share-item" :class="[shareList[0].share.length-1===index?'tui-item-last':'']" v-for="(item,index) in shareList[0].share" :key="index" @tap="forward(index)">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
								<tui-icon :name="item.icon" :color="item.color" :size="item.size?item.size:36"></tui-icon>
							</view>
							<view class="tui-share-text">{{item.name}}</view>
						</view>
						<view class="tui-empty">!</view>
					</view>
				</scroll-view>
				
			</view>
		</tui-bottom-popup>
		<!--底部分享弹窗-->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',				//获取列表页穿过来的id
				userName:"",				//名字
				avatar:"",					//头像
				content:"",					//内容
				addTime:"",					//时间
				thumbsNum:"",				//
				readNum:"",					//
				commentNum:"",				//
				userLevel:"",				//普通用户
				updateTime:"",				//更新时间
				deleted:"",					//删除
				imgList:[],					//图片
				hasVideo:"",				//图片还是视频
				userId:"",					//userId
				commentVal: '',				//输入内容
				commentList:[],     		//评论列表
				total:"",					//评论条数
				popupShow: false,           //底部分享
				likeNum:false,
				openSettingBtnHidden: true,	//是否授权
				ewmImg:"",  				//这是要保存的图片
				shareList: [
					{
						share: [
							{
								name: "微信",
								icon: "wechat",
								color: "#80D640"
							},
							{
								name: "朋友圈",
								icon: "moments",
								color: "#80D640",
								size: 32
							},
						]
					},
				],
			};
		},
		onLoad(options) {
			let that = this;
			if (options && options.id) {
				that.detailId = options.id
				that.materialDetail(that.detailId)
				that.materialcommentList(that.detailId)
			}
			let orderInfo = uni.getStorageSync("userInfo")
			this.userId = orderInfo.id
			
		},

		methods: {
			// 获取详情
			materialDetail(index){
				this.tui.request(
					'/app/material/materialDetail',
					'GET', {
						id: index,
					},
					false,
					false,
					false,
				).then(res => {
					let materDetail = res.data
					this.userName = res.data.userName
					this.avatar = res.data.avatar
					this.addTime = res.data.addTime
					this.content = res.data.content
					this.thumbsNum = res.data.thumbsNum
					this.readNum = res.data.readNum
					this.commentNum = res.data.commentNum
					this.userLevel = res.data.userLevel
					this.updateTime = res.data.updateTime
					this.deleted = res.data.deleted
					this.hasVideo = res.data.hasVideo
					this.imgList = res.data.imgList
					this.ewmImg = res.data.imgList[0].imgSrc
					console.log("this.ewmImg",this.ewmImg)
				}).catch(err => {
					console.log(err)
				})
			},
			//评论列表
			materialcommentList(index){
				this.tui.request(
					'/app/material/materialCommentList',
					'GET', {
						materialId: index,
					},
					false,
					false,
					false,
				).then(res => {
					this.commentList = res.data.list
					this.total = res.data.total
					
				}).catch(err => {
					console.log(err)
				})
			},
			saveEwm:function(e){
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									this.saveImgToLocal();
								},
								fail() {//这里是用户拒绝授权后的回调
									this.openSettingBtnHidden = false
								}
							})
						} else {  //用户已经授权过了
							this.saveImgToLocal();
						}
					}
				})
			},
			// 保存
			saveImgToLocal:function(e){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function (res) {
						if (res.confirm) {
							uni.downloadFile({
								url: that.ewmImg,					//图片地址
								success: (res) =>{
									console.log(res)
									if (res.statusCode === 200){
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										});
									} 
								}
							})
							
							
						} else if (res.cancel) {
							
						}
					}
				});
			},

			// 转发弹框
			popup() {
				this.popupShow = !this.popupShow
			},
			
			// 转发朋友圈
			forward(index){
				let that = this;
				uni.getProvider({
					service: "payment",
					success: (res) => {
						console.log(res)
					},
					fail: (e) => {
						console.log("获取支付通道失败：", e);
					}
				});
				
				if(index == 0){
					uni.share({
					    provider: "weixin",
					    scene: "WXSceneSession",
					    type: 0,
					    href: that.tui.intershareUrl() + "/qianyanH5/#/pages/material/materidetail?id=" + that.detailId,
					    title: "素材分享",
					    summary: that.content,
					    imageUrl: that.ewmImg,
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}else{
					uni.share({
					    provider: "weixin",
					    scene: "WXSenceTimeline",
					    type: 0,
					    href: that.tui.intershareUrl() + "/qianyanH5/#/pages/material/materidetail?id=" + that.detailId,
					    title: "素材分享",
					    summary: that.content,
					    imageUrl: that.ewmImg,
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}
				
			},
			
			//点赞
			thumbs(){
				this.tui.request(
					'/app/material/thumbs',
					'GET', {
						"id": this.detailId,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.likeNum = true
						this.materialDetail(this.detailId)
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			//输入表情
			addImg(){
			
			},
			
			// 输入评论
			addCommon() {
				
				//#ifdef H5
					this.tui.toast("请下载APP进行评论")
					return
				//#endif
				
				this.tui.request(
					'/app/material/commentMaterial',
					'POST', {
						"userId": this.userId,
						"materialId": this.detailId,
						"parentId": "",
						"content": this.commentVal,
					},
					false,
					false,
					false,
				).then(res => {
					console.log(res)
					this.commentVal = ''
					this.materialcommentList(this.detailId);
				}).catch(err => {
					console.log(err)
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.likeColler{
		color: red;
	}
	.no-data {
		font-size: 24upx;
		line-height: 40upx;
		padding: 60upx 0;
		text-align: center;
		color: #CCCCCC;
	}

	.detail-wrap {
		background-color: #ffffff;
		// padding: 30upx 30upx 0;
		padding-top: 30upx;
		width: 100%;
		border-top: 10upx solid rgba(250, 250, 250, 1);

		.item-head {
			display: flex;
			align-items: center;
			padding: 20upx 40upx;
			width: 100%;
			justify-content: space-between;
			border-bottom: 1upx solid var(--mainColor);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background-color: #fff;
			height: 120upx;

			.left-info {
				display: flex;
				align-items: center;

				.img-wrap {
					width: 70upx;
					height: 70upx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 20upx;

					.avatar {
						font-size: 32upx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						line-height: 43upx;
					}
				}

				.head-name {
					padding-left: 40upx;
					color: #666666;
					font-size: 32upx;
				}
			}

			.follow-btn {
				width: 140upx;
				height: 60upx;
				border: 1upx solid var(--mainColor);
				color: var(--mainColor);
				border-radius: 40upx;
			}

			.followed {
				color: #fff;
				background: var(--activeColor);
				border: 1upx solid var(--activeColor);
			}
		}

		.swiper-wrap {
			position: relative;

			image {
				width: 100%;
			}

		}

		
		.detail-info {
			font-size: 28upx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 34upx;
			margin-top: 20upx;
		}

		.other-info {
			display: flex;
			justify-content: space-between;
			padding: 20upx 0;

			
		}

		.comment-wrap {
			background-color: #fff;
			padding-bottom: 150upx;
			

			.scroll-wrap {
				height: 100%;
				border-top: 1upx solid var(--mainColor);
			}

			.comment-num {
				padding: 15upx 0;
				font-size: 32upx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				line-height: 43upx;
				width: 93%;
				margin: 0 auto;

				text {
					float: right;
					font-size: 24upx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					line-height: 43upx;
				}
			}
			.bor{
				width: 100%;
				height: 2px;
				background:rgba(242,242,242,1);
			}

			.comment-item {
				// display: flex;
				// justify-content: space-between;
				padding-top: 30upx;
				
				.left-avatar {
					display: flex;
					width: 93%;
					margin: 0 auto;

					.avatar {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;
						overflow: hidden;
						border: 1upx solid #ECECEC;
					}

					.right-top {
						margin-left: 20upx;

						.reply {
							display: flex;
							font-size: 28upx;
						}

						.active {
							color: var(--activeColor) !important;
						}

						.title {
							font-size: 32upx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							line-height: 56upx;
							
							.picimg{
								width: 56px;
								height: 16px;
								line-height: 16px;
								margin-left: 10px;
								display: inline-block;
							}
							
						}

						.time {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 400;
							color: rgba(128, 128, 128, 1);
							line-height: 43upx;
						}
					}
				}

				.right-box {
					margin-left: 20upx;
					flex: 1;

					.right-mine {
						// padding: 20upx;
						// background-color: #f5f8f9;
						border-radius: 10upx;
						flex: 1;
						padding-left: 92upx;

						.other-info {
							justify-content: flex-end;
						}
					}

					.content {
						font-size: 32upx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 48upx;
					}
					.contenttime{
						font-size: 24upx;
						font-weight: 500;
						color: rgba(128,128,128,1);
						line-height: 48upx;
					}
				}
			}
		}

		.comment-input {
			height: 119upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.35);

			.top-input {
				display: flex;
				align-items: center;
				width: 547upx;
				height: 60upx;
				text-indent: 20upx;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(230, 230, 230, 1);
				box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
				border-radius: 30px;

			}

			input::-webkit-input-placeholder {
				font-size: 28upx;
				font-weight: bold;
				color: rgba(128, 128, 128, 1);
				line-height: 43upx;
			}

			.biaoq {
				width: 52upx;
				height: 52upx;
				border-radius: 50%;
				background: url(../../static/img/info_slices/business_college_face.png) no-repeat;
				-webkit-background-size: 100% 100%;
				background-size: 100% 100%;
			}

			.send-btn {
				width: 51upx;
				height: 51upx;
				margin-left: 10upx;
				border-radius: 50%;
				background: url(../../static/img/info_slices/business_college_send.png) no-repeat;
				-webkit-background-size: 100% 100%;
				background-size: 100% 100%;
			}
		}
	}
	
	/* 列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;
	
		.mate_header {
			display: flex;
			align-items: center;
		
			image {
				width: 75upx;
				height: 75upx;
				border-radius: 50%;
			}
		
			.mate_tit {
				margin-left: 10px;
				font-size: 14px;
				color: #333333;
		
				.mate_time {
					font-size: 12px;
					color: #808080;
				}
			}
		
		}
		
		
		.mate_content {
			font-size: 16px;
			color: #333333;
			padding-top: 10px;
		}
		
		.mate_image {
			padding-top: 10px;
			display: flex;
			justify-content: space-between;
		
			image {
				width: 108px;
				height: 108px;
			}
			
		}
		.mate_video{
			width: 100%;
			padding-top: 10px;
		}
		
		.mate_text {
			width: 100%;
			margin-top: 20px;
		}
		
		.mate_footer {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 5px;
			padding-bottom: 5px;
		
			.mate_left {
				display: flex;
				align-items: center;
		
				.mate_save {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
					margin-right: 10px;
		
					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}
		
				.mate_transmit {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
					margin-right: 10px;
		
					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}
		
			}
		
			.mate_right {
				display: flex;
				align-items: center;
		
				.mate_comment {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
					margin-right: 10px;
		
					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}
		
				.mate_tags {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #808080;
		
					image {
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}
			}
		}
	}
	
	/*转发*/
	.tui-share {
		background: #e8e8e8;
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-share-title {
		font-size: 26rpx;
		color: #7E7E7E;
		text-align: center;
		line-height: 26rpx;
		padding: 20rpx 0 50rpx 0;
	}
	
	.tui-share-top,
	.tui-share-bottom {
		min-width: 100%;
		padding: 0 20rpx 0 30rpx;
		white-space: nowrap;
	}
	
	.tui-mt {
		margin-top: 30rpx;
		padding-bottom: 300rpx;
	}
	
	.tui-share-item {
		width: 126rpx;
		display: inline-block;
		margin-right: 24rpx;
		text-align: center;
	}
	
	.tui-item-last {
		margin: 0;
	}
	
	.tui-empty {
		display: inline-block;
		width: 30rpx;
		visibility: hidden;
	}
	
	.tui-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 126rpx;
		width: 126rpx;
		border-radius: 32rpx;
	}
	
	.tui-share-text {
		font-size: 24rpx;
		color: #7E7E7E;
		line-height: 24rpx;
		padding: 20rpx 0;
		white-space: nowrap;
	}
	
	.tui-btn-cancle {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #f6f6f6;
		font-size: 36rpx;
		color: #3e3e3e;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-hover {
		background: rgba(0, 0, 0, 0.2)
	}
	
</style>
